/**
* @description: 我的===> 个人档案
* @author: JiWei
* @date:
**/
<template>
  <view class="personal-info-main">
    <nav-bar class="header" back title="个人档案" @goBack="goBack"/>
    <view class="main-container">
      <view class="personal-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in personalInfoData" :key="index" :title="item.title" :value="item.value">
            <template #right-icon v-if="item.title === '头像'">
              <span class="operation"><img src="../../static/img/autaor.png" alt=""></span>
            </template>
          </van-cell>
        </van-cell-group>
      </view>
      <view class="dept-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in deptInfoData" :key="index" :title="item.title" :value="item.value"/>
        </van-cell-group>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "../../components/common/nav-bar";
export default {
  name: 'individualFile',
  components: {navBar },
  props: {},
  data() {
    return {
      personalInfoData: [
        {
          title: "头像",
        },
        {
          title: "姓名",
          value: "省公司"
        },
        {
          title: "手机号",
          value: "侯村站"
        },
        {
          title: "性别",
          value: "500Kv"
        },
        {
          title: "年龄",
          value: "左侧"
        },
      ],
      deptInfoData: [
        {
          title: "所属组织",
          value: "省公司至侯村站一号光缆"
        },
        {
          title: "岗位",
          value: "省公司"
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/testProject/mine'
      })
    }
  }
};
</script>
<style scoped lang="scss">
.personal-info-main {
  min-height: 100vh;
  background-color: #F2F6FA;

  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }

  .main-container {
    padding: px2vh(30) px2vw(30);

    .personal-info-container, .dept-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .personal-info-container {
      margin-bottom: px2vh(30);

      .operation {
        display: flex;
        align-items: center;
        margin-left: px2vw(30);

        img {
          width: px2vw(72);
        }
      }
    }
  }
}
</style>